<template>
  <div>
    <h3>会员列表</h3>
    
    <input type="button" value="增加" @click="add"/>
    <div>
      手机号：<input type="text" v-model="queryInfo.Phone">
      出生日期：<input type="date" v-model="queryInfo.Createtime">-<input type="date" v-model="queryInfo.Birthday">
      <input type="button" value="查询" @click="getlist"/>
    </div>
    <table  class="table table-bordered">
      <tbody>
          <tr>
            <td>Id</td>
            <td>Username</td>
            <td>Phone</td>
            <td>Birthday</td>
            <td>操作</td>
          </tr>
          <tr v-for="item in list">
            <td>{{item.Id}}</td>
            <td>{{item.Username}}</td>
            <td>{{item.Phone}}</td>
            <td>{{item.Birthday}}</td>
            <td>
              <input type="button" value="删除" @click="del(item.Id)"/>
              <input type="button" value="修改" @click="update(item.Id)"/>
            </td>
          </tr>
      </tbody>
      
    </table>
  </div>
</template>

<script setup lang="ts">

import { reactive,toRefs,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router'; 
const router = useRouter();


let data:any = reactive({
  queryInfo:{
       Phone:'',
       Createtime:'',
       Birthday:'',
  },
  list:[],
})
let {queryInfo,list}= toRefs(data);

//点击增加按钮跳转到添加页面
const add=()=>{
  router.push("/main/memberAdd")
};

//就绪函数页面一打开就显示
onMounted(()=>{
getlist();
})

const del=(Id:any)=>{
  let f=confirm("请问确认删除吗?");
  if(f==true){
    let obj={
      Id:Id,
    };

    axios({
        url:'/api/one/del/del',
        method:'delete',
        params:obj,
      })
      .then((res)=>{
        console.log(res)
          if(res.data.data>0){
              alert('删除成功');
              getlist();
          }
          else
          {
            alert('删除失败');
          }
        })
      .catch((err)=>{
        console.log(err)
      })
    
      
  }
}


//修改会员跳转
const update=(Id:any)=>{
  router.push({
    path:'/main/memberUpdate',
    query:{
      Id:Id,
    }
  })
}



//获取列表数据
const getlist=()=>{
  //定义参数
  let obj={
    Phone:queryInfo.value.Phone,
    Createtime:queryInfo.value.Createtime,
    Birthday:queryInfo.value.Birthday,
  }

  axios({
    url:'/api/one/show/show',
    method:'get',
    params:obj,
  })
  .then((res)=>{
    console.log(res)
    list.value=res.data.data;
  })
  .catch((err)=>{
    console.log(err)
  })
};

</script>

<style scoped>

</style>